<template>
	<view>
		<u-line></u-line>
		<view v-if="carPrice==0">
			<u-loading-icon></u-loading-icon>
		</view>
		<view class="t-body " v-if="carPrice!=0">
			<view class="pt10 dsf jcsb alc mb24 ">
				<view></view>
				<view class="standard ">
					<u-button icon="question-circle" shape="circle" size="mini" :text="$root.m0"></u-button>
				</view>
			</view>
			<view class="cost-car ">
				<view class="dsf jcsb mb24 ">
					<view>
						<text class="fz48 t-money  ">{{carPrice}}</text>
						<text class="fz28 ">元</text>
						<text class="t-bottom ">{{'('+distance+'公里)'}}</text>
					</view>
					<view class="t-car ">{{carInfo.title}}</view>
				</view>
				<view class="t-bottom ">{{$root.m1}}</view>
			</view>
			<u-line></u-line>
			<view>
				<view class="mt24 cost-body t-money " v-if="have_pay_price!=0">
					<view>{{$root.m2}}</view>
					<view>{{have_pay_price+$root.m3}}</view>
				</view>
				<view class="mt24 " v-if="have_pay==0">
					<view class="cost-body1 ">
						<view>{{$root.m4}}</view>
						<view>{{basePrice+$root.m5}}</view>
					</view>
					<view class="t-bottom ">{{$root.m6}}</view>
					<view class="w200 h230 " v-if="OrderInfo.driverOrder&&OrderInfo.driverOrder.picture">
						<image class="w100 h100 _img " :src="OrderInfo.driverOrder.picture.goodsImg"></image>
					</view>
				</view>
				<view v-if="$root.g0>0">
					<detail is_:pay="0" :supplems="supplem"></detail>
				</view>
				<view class="mt24 " v-if="additionalOrder&&additionalOrder.pay_status==0">
					<view class="cost-body1 " :index="index" v-for="(item,index) in $root.l0">
						<view>{{item[$orig].charge_name}}</view>
						<view>{{item[$orig].charging_standard+item.m7}}</view>
					</view>
				</view>
			</view>
			<view>
				<view class="mt24 cost-body t-money " v-if="have_paid_price!=0">
					<view>{{$root.m8}}</view>
					<view>{{have_paid_price+$root.m9}}</view>
				</view>
				<view class="mt24 " v-if="have_pay==1||have_pay==-5">
					<view class="cost-body1 ">
						<view>{{$root.m10}}</view>
						<view>{{basePrice+$root.m11}}<text v-if="have_pay==-5">{{'('+$root.m12+')'}}</text>
						</view>
					</view>
					<view class="t-bottom ">{{$root.m13}}</view>
					<view class="w200 h230 " v-if="OrderInfo.driverOrder&&OrderInfo.driverOrder.picture">
						<image class="w100 h100 _img " :src="OrderInfo.driverOrder.picture.goodsImg"></image>
					</view>
				</view>
				<view v-if="$root.g1>0">
					<detail is_:pay="1" :supplems="supplem"></detail>
				</view>
				<view class="mt24 "
					v-if="additionalOrder&&(additionalOrder.pay_status==1||additionalOrder.pay_status==-5)">
					<view class="cost-body1 " :index="index" v-for="(item,index) in $root.l1">
						<view>{{item[$orig].charge_name}}</view>
						<view>{{item[$orig].charging_standard+item.m14+''}}<text
								v-if="additionalOrder.pay_status==-5">{{'('+item.m15+')'}}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="$root.g2!='{}'">
				<view class="mt24 cost-body1 " v-if="PriceDetail.additional_price">
					<view>增值服务</view>
					<view>{{PriceDetail.additional_price+$root.m16}}</view>
				</view>
				<view class="mt24 cost-body1 " v-if="PriceDetail.night_price">
					<view>夜间服务费</view>
					<view>{{PriceDetail.night_price+$root.m17}}</view>
				</view>
			</view>
			<view class="mt24 " v-if="coupon_price!='0'&&coupon_price!='0.00'&&coupon_price!=null">
				<view class="cost-body1 ">
					<view>{{$root.m18}}</view>
					<view>{{'-'+coupon_price+$root.m19}}</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				carInfo: {},
				cost: {},
				distance: 0,
				carPrice: 0,
				basePrice: 0,
				OrderInfo: {},
				tollOrder: {},
				additionalOrder: {},
				have_pay: 1,
				coupon_price: 0,
				supplem: [],
				have_paid_price: 0,
				have_pay_price: 0,
				PriceDetail: {}
			}
		},
		onLoad() {

		},
		onShow() {

		},

		methods: {

		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fff
	}

	.t-body {
		padding: 20upx 60upx
	}

	.t-body .standard {
		width: 200upx
	}

	.t-body .cost-car {
		margin-bottom: 30upx
	}

	.t-body .t-money {
		align-items: flex-end;
		font-size: 100upx;
		font-weight: 700
	}

	.t-body .t-car {
		align-items: flex-end;
		display: -webkit-flex;
		display: flex;
		font-size: 36upx
	}

	.t-body .t-bottom {
		color: #999;
		font-size: 28upx
	}

	.t-body .cost-body {
		font-size: 32upx
	}

	.t-body .cost-body,
	.t-body .cost-body1 {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		margin-bottom: 10upx
	}

	.t-body .cost-body1 {
		color: #999;
		font-size: 30upx
	}
</style>